<template>
  <div id="my-collapse">
    <div class="my-collapse-wrapper">
      <div class="my-collapse-origin" @click="isOpen=!isOpen">
        <span>选出结果：{{count}}</span>
        <span>
          <b v-text="isOpen?'收起筛选':'展开筛选'"></b>
          <i class="fa" :class="isOpen?'fa-angle-up':'fa-angle-down'" aria-hidden="true"></i>
        </span>
      </div>
      <div v-show="isOpen" class="my-collapse-change" :style="contentWrapStyle">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'my-collapse',
    data () {
      return {
        isOpen: this.open,
        contentWrapStyle: {
          height: 'auto',
          display: 'block'
        },
        contentHeight: 0,
        focusing: false,
        isClick: false
      }
    },
    props: {
      title: String,
      open: Boolean,
      count: {
        type: [String, Number],
        default () {
          return 0
        }
      }
    },
    computed: {
      // isActive () {
      //   return true
      // }
      // id() {
      //   return generateId();
      // }
    },
    methods: {
      // handleFocus() {
      //   setTimeout(() => {
      //     if (!this.isClick) {
      //       this.focusing = true;
      //     } else {
      //       this.isClick = false;
      //     }
      //   }, 50);
      // },
      // handleHeaderClick() {
      //   this.dispatch('ElCollapse', 'item-click', this);
      //   this.focusing = false;
      //   this.isClick = true;
      // },
      // handleEnterClick() {
      //   this.dispatch('ElCollapse', 'item-click', this);
      // }
    }
  }
</script>

<style lang="scss" scoped>
  #my-collapse {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background: #ffffff;
    .my-collapse-wrapper {
      /*min-height: 36px;*/
      overflow: hidden;
      .my-collapse-origin {
        min-height: 1.0666667rem;
        line-height: 1.0666667rem;
        span {
          height: inherit;
          &:nth-of-type(1) {
            float: left;
            padding-left: 0.4rem;
          }
          &:nth-of-type(2) {
            float: right;
            color: #1296db;
            padding-right: 0.4rem;
            b {
              font-weight: normal;
            }
          }
        }
      }
      .my-collapse-change {
        /*display: none;*/
      }
    }
  }
</style>
